<!-- 分页器 -->
<template>
  <div>
    <div class="pagePublicStyle" v-show="pageData.total > 0">
      <div class="totalCount" v-show="isShowTotalCount"> 当前第 {{ pageData.current }} 页， 当前第
        {{ (pageData.current - 1) * pageData.rows + 1 }} 条到第
        {{ pageData.current * pageData.rows > pageData.total ? pageData.total : pageData.current * pageData.rows}}
        条， 共 {{ pageData.total }} 条
      </div>
      <Page :total="pageData.total" placement="top" :pageSize="pageData.rows"
        :current="pageData.current" :page-size-opts="pageData.pageSizeOpts"
        @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun"
        :show-elevator='showElevator' :show-sizer='showSizer' :show-total='showTotal' />
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    props: {
      pageData: {
        type: Object,
        default: () => {
          return {
            total: 0,
            current: 1,
            rows: 50,
            pageSizeOpts: [10, 20, 30, 40, 50],
          }
        },
      },
      isShowTotalCount: {
        type: Boolean,
        default: true
      },
      showElevator: {
        type: Boolean,
        default: true
      },
      showSizer: {
        type: Boolean,
        default: true
      },
      showTotal: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    },
    computed: {},
    watch: {},
    methods: {
      //分页触发
      pageOnChangeFun(pages) {
        console.log(pages)
        if (pages != 1 || this.pageData.current != 1) {
          this.pageData.current = pages
          this.$emit('pageOnChangeFun', pages)
        }
      },
      //改变每页条数触发
      pageOnPageSizeChangeFun(rows) {
        this.pageData.rows = rows
        this.pageData.current = 1
        this.$emit('pageOnPageSizeChangeFun', rows)
      },
    },
    created() {},
    mounted() {},
  }
</script>
<style lang='scss' scoped>
</style>